<template>
  <div class="EquivalentHourbox">
    <div class="leftbox">
      <NocheckTree @handleNodeClicks="handleNodeClicks"></NocheckTree>
    </div>
    <div class="rightbox">
      <div class="righttopbox">
        <el-form ref="form" label-position="left" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="7" style="display: flex;margin-top: 4px;">
                  <el-radio-group v-model="radio3" size="small" style="margin-right: 20px;">
                    <el-radio-button label="1">日</el-radio-button>
                    <el-radio-button label="2">月</el-radio-button>
                    <el-radio-button label="3">年</el-radio-button>
                  </el-radio-group>
                  <el-date-picker style="flex:1;" v-if="radio3=='1'" v-model="value1" type="date" placeholder="选择日期" size="small"></el-date-picker>
                  <el-date-picker style="flex:1;" v-if="radio3=='2'" v-model="value2" type="month" placeholder="选择月" size="small"></el-date-picker>
                  <el-date-picker style="flex:1;" v-if="radio3=='3'" v-model="value3" type="year" placeholder="选择年" size="small"></el-date-picker>
                </el-col>
                <el-col :span="17" style="text-align: right;">
                  <el-form-item label="">
                    <el-button size="small" @click="chongzhi">重 置</el-button>
                    <el-button size="small" type="primary" @click="gethournengxiao(treevalue)">查 询</el-button>
                  </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </div>
      <div class="rightbodybox">
        <div class="titlebox">
          <div>等效小时 </div>
          <div class="righttitle">
            <TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
        <div class="echandtabbox">
          <div class="dengxiaoech" ref="dengxiaoech"></div>
          <div class="tutext">与平均等效小时偏差比例：
             优秀: {{objvalue.youxiu}}%,良好: {{objvalue.lianghao}}%，正常: {{objvalue.zhengchang}}%，较差: {{objvalue.jiaocha}}%,异常: {{objvalue.yichang}}%
          </div>
          <div class="dengxiaoech table" >
            <TableColumn
                ref="tabledata"
                :tableData="tableData" 
                :tableConfig="tableConfigs" 
                :issize="issize">
              </TableColumn>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getdengxiaohousapi} from '@/api/Photovoltaic/analysis/Consumption'
import NocheckTree from '../../monitor/component/NocheckTree.vue'
import TopTile from '@/components/TopTitle/index.vue'
import * as echarts from 'echarts';
import { exportexcel } from '@/utils/excel'
import TableColumn from '@/components/Table/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn,
    NocheckTree
  },
  data() {
    return {
      objvalue:{},
      radio3: '1',
      value1:'',
      value2:'',
      value3: '',
      issize: 'medium',
      tableData: [],
      treevalue:{},
      tableConfigs: [
      { label: '序号', type: 'index', center: 'center', width: '70' },
        { label: '电站名称', prop: 'systemName' ,},
        { label: '逆变器名称', prop: 'name'},
        { label: '额定功率(kW)', prop: 'capacity', center: 'right'  },
        { label: '日发电量(kWh)', prop: 'powerGeneration', center: 'right'},
        { label: '等效小时(h)', prop: 'hours',center: 'right' },
        { label: '平均等效小时(h)', prop: 'avgHours', center: 'right' },
        { label: '等效小时偏差(h)', prop: 'hoursDeviation', center: 'right' },
        { label: '差值比率(%)', prop: 'rate', center: 'right'  },]
    };
  },

  mounted() {
    this.gettime()
  },

  methods: {

    // 树节点点击
    handleNodeClicks(val) {
      this.treevalue=val
      this.gethournengxiao(val)
    },
    chongzhi() {
      this.radio3 = '1'
      this.gettime()
      this.gethournengxiao(this.treevalue)
     },
    // 获取等效小时图表
    async gethournengxiao(val) {
      var chartDom = this.$refs.dengxiaoech
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      this.$refs.tabledata.loading=true
      const { data: { list,content } } = await getdengxiaohousapi({
        classId:val.id,dateString:this.radio3=='1'?this.value1:this.radio3=='2'?this.value2:this.value3,dateType:this.radio3,className:val.name
      })
      this.tableData=list
      this.$refs.tabledata.loading=false
      const array = content.split(',')
      const datalist= [
              { value: array[0], name: '正常' },
              { value: array[1], name: '良好' },
              { value: array[2], name: '优秀' },
              { value: array[3], name: '较差' },
              { value: array[4], name: '异常' },
              { value: array[5], name: '无数据' },
            ]
      const obj = {}
      const sum = array.reduce((acc, cur) => +acc + +cur, 0);
      obj['zhengchang'] = (array[0] / sum*100).toFixed(1)
      obj['lianghao'] = (array[1] / sum*100).toFixed(1)
      obj['youxiu'] = (array[2] / sum*100).toFixed(1)
      obj['jiaocha'] = (array[3] / sum*100).toFixed(1)
      obj['yichang'] = (array[4] / sum*100).toFixed(1)
      obj['wushuju'] = (array[5] / sum*100).toFixed(1)
      this.objvalue=obj
      array
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'center',
          right: '20%',
          orient:'vertical',
          align:'right'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['65%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 1,
            itemStyle: {
              borderRadius: 10
            },
          label: {
            normal: {
              formatter:'{b}\n{c}',
                rich: {
                c: {
                  color: "inherit",
                  fontSize: 10,
                  fontWeight: "bold",
                  lineHeight: 5,
                  },
                    b: {
                    fontSize: 18,
                    height: 40,
                  },
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 40,
              smooth: true
            },
            data:datalist
          }
        ]
      };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
    // 导出
    daochu() {
      exportexcel('pes-microservice-biz/pes/run/analysis/equivalent/hours/exportExcel', {
        classId:this.treevalue.id,dateString:this.radio3=='1'?this.value1:this.radio3=='2'?this.value2:this.value3,dateType:this.radio3,className:this.treevalue.name
      },'等效小时分析')
    },
    // 刷新
    shuaxin() {
      this.gethournengxiao(this.treevalue)
      this.$message.success('列表刷新成功')
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.$set(this,'value1',year+'-'+month+'-'+day)
      this.$set(this,'value2',year+'-'+month)
      this.$set(this,'value3',year.toString())
    },
  },
};
</script>

<style scoped>
.EquivalentHourbox{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    padding: 20px;
    background-color: #fff;
    margin-right: 10px;
  }
  .rightbox{
    width: calc(100% - 310px);
    height: 100%;
    .righttopbox{
      height: 80px;
      padding:   20px;
      background-color: #fff;
      margin-bottom: 10px;
    }
    .rightbodybox{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .titlebox{
        display: flex;
        justify-content: space-between;
      }
      .echandtabbox{
        height: 96%;
        .dengxiaoech{
          height: 48%;
        }
        .tutext{
          margin-bottom: 10px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>